<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td{
            width: 100px;
        }
    </style>
</head>
<body>
<div>
    <table border="1">
     <caption>个人信息</caption>
     <tr>
         <td>照片:</td>>
         <td><img :src="person.url"></td>
     </tr>
     <tr>
          <td>姓名:</td>
         <td>{{person.name}}</td>
        </tr>
        <tr>
            <td>年龄:</td>
         <td>{{person.age}}</td>
        </tr>
        <tr>
         <td>好友:</td>
            <td>
                <ul>
                 <li v-for="name in person.firends">{{name}}</li>
                </ul>
         </td>
        </tr>
    </table>
    <input type="button" value="加载数据" @click="f()">
</div>
<script src="js/Vue.js"></script>
<script>
    Vue.createApp({
        data(){
            return{
                person:{name:"",age:"",url:"",firends:[]}
            }
        },
        methods:{
            f(){
                this.person={name: "蔡徐坤",age:19,url:"../1.jpg",
                    firends:["吴亦凡","范丞丞","陈立农"]}
            }
        }
    }).mount("body>div")
</script>
</body>
</html>